<template>
    <div class="wrapper">
        <div class="office">{{ data.authObject || '-' }}</div>
        <div class="business">{{ data.authRemark || '-' }}</div>
        <div class="authorization">
            <div @click="handleTo('authorization')">
                <p class="label">
                    <img
                        src="../../assets/images/icon-authorization.png"
                        alt=""
                    />
                    <span>授权访问期限至</span>
                </p>
                <p
                    class="val"
                    v-html="data.authEnd || '2000-01-01'"
                ></p>
                <p class="val"></p>
            </div>
            <div class="line"></div>
            <div>
                <p class="label">
                    <img
                        src="../../assets/images/icon-authorization2.png"
                        alt=""
                    />
                    <span>期限内访问次数</span>
                </p>
                <p class="val">
                    {{
                        (data.authVisitTimes === 9999 ? '无限制' : data.authVisitTimes) ||
                        0
                    }}
                </p>
                <p class="val"></p>
            </div>
        </div>
        <div class="content-wrapper">
            <ul>
                <!-- <li :class="{ 'active': showType === 'record' }" @click="showType = 'record'">数据访问记录</li> -->
                <li
                    :class="{ active: showType === 'pdf' }"
                    @click="showType = 'pdf'"
                >
                    授权书
                </li>
            </ul>
            <div class="content">
                <ul
                    v-show="showType === 'record'"
                    class="detail"
                >
                    <li
                        v-for="(visit, index) in data.visitArray"
                        :key="index"
                    >
                        <div class="visit-header">
                            <span>{{ `第${visit.rowNum}次访问` }}</span>
                            <span>{{ visit.execTime }}</span>
                        </div>
                        <div>{{ visit.visitMark }}</div>
                    </li>
                </ul>
                <Img
                    v-show="showType === 'pdf'"
                    class="pdf-wrapper"
                    :src="PDFUrl"
                />
            </div>
        </div>
    </div>
</template>

<script>
import { APP_ID } from '@/config';
import { restful_api, getUrl_api } from '@/api';
export default {
    name: 'AuthDetail',
    components: {},
    data() {
        return {
            data: {},
            showType: 'pdf',
            PDFUrl: '',
        };
    },
    async mounted() {
        this.main();
    },
    methods: {
        async getData() {
            let authId = this.$route.query.authId;
            // 获取授权业务信息
            this.data = await restful_api({
                methodId: 'TP350006',
                params: { authId },
            });
            this.data.visitArray.sort((a, b) => Number(b.rowNum) - Number(a.rowNum));

            let { fileBase64, fileName } = await getUrl_api(
                `/taap/service/getFile/${this.data.srcOrderNo}`
            );
            this.PDFUrl = fileBase64;
        },
        main() {
            this.getData(this.authType);
        },
        handleTo(nav, userType) {
            this.$router.push({ path: nav, query: { userType } });
        },
    },
};
</script>
<style scoped>
.wrapper {
    display: flex;
    flex-direction: column;
    padding: 32px 16px 0;
    color: #fff;
    background: #f5f5f5 url('../../assets/images/background.png') no-repeat;
    background-size: 100% auto;
}
.office {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}
.business {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 24px;
}
.authorization {
    display: flex;
    align-items: center;
    width: 100%;
    height: 70px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 26px;
    text-align: center;
    color: #999;
    background-color: #fff;
}

.authorization > div:not([class]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}
.authorization > div.line {
    width: 1px;
    height: 40px;
    border-left: solid thin #efefef;
}
.authorization > div .label {
    display: flex;
    justify-content: center;
    align-items: center;
}
.authorization > div .label img {
    width: 10px;
    /* height: 14px; */
    margin-right: 5px;
}
.authorization > div .val {
    font-size: 16px;
    color: #000;
}
.content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #333;
    background-color: #fff;
    overflow: hidden;
}
.content-wrapper > ul {
    display: flex;
}
.content-wrapper > ul li {
    flex: 1;
    text-align: center;
    font-size: 14px;
    line-height: 42px;
    border-bottom: solid thin #e6e6e6;
}
.content-wrapper > ul li.active {
    color: #016eff;
    border-bottom: solid 2px #016eff;
}
.content-wrapper .content {
    flex: 1;
    overflow: hidden;
}
.content-wrapper .detail {
    padding: 16px;
    font-size: 12px;
    line-height: 24px;
    color: #969696;
}
.content-wrapper .detail li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 9px;
}
.content-wrapper .detail li::before {
    position: absolute;
    top: 7px;
    left: 12px;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #8c93a4;
    content: '';
    z-index: 2;
}
.content-wrapper .detail li:first-child:before {
    background-color: #1e6ddd;
    box-shadow: 0px 0px 0px 3px #1e6ddd33;
}
.content-wrapper .detail li:not(:last-child):after {
    position: absolute;
    top: 16px;
    left: 16px;
    display: block;
    width: 0px;
    height: 100%;
    border-left: solid thin #8c93a4;
    content: '';
}
.content-wrapper .detail li:first-child:after {
    top: 18px;
}
.content-wrapper .detail .visit-header {
    display: flex;
    justify-content: space-between;
    color: #4c4c4c;
}
.content-wrapper .pdf-wrapper {
    height: 100%;
    overflow: scroll;
}
</style>
